<template>
  <div class="formContainer">
    <div class="login-title">明医诊所云</div>
    <el-form :model="loginForm" :rules="ruleForm" ref="loginForm">
      <el-form-item prop="username">
        <el-input v-model="loginForm.username" placeholder="手机号/账号">
          <font-awesome-icon
            slot="prefix"
            icon="fa-solid fa-user"
          ></font-awesome-icon>
        </el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="密码"
        >
          <font-awesome-icon slot="prefix" icon="fa-solid fa-lock" />
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-checkbox
          label="记住密码"
          name="remember"
          v-model="loginForm['remember-me']"
        ></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" style="width: 100%" @click="onSubmit"
          >Login</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  import axios from 'axios'
  import { getUserInfo } from '@/api/user'
  import Cookies from 'js-cookie'
  import Base64 from 'js-base64'

  export default {
    name: 'Login',
    data() {
      return {
        // 表单数据
        loginForm: {
          username: '',
          password: '',
          'remember-me': false,
        },
        //   验证规则
        ruleForm: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
          ],
        },
         Base64: require('js-base64').Base64

      }
    },
    methods: {
      // 表单提交
      onSubmit() {
        this.$refs['loginForm'].validate((valid) => {
          if (valid) {
            // 表单验证通过
            // 密码保存在cookie里面
            if (this.loginForm['remember-me']) {
              this.setRembCookie()
            } else {
              this.removeRembCopkie()
            }
            let that = this
            axios({
              url: 'http://127.0.0.1:8686/his/login',
              method: 'POST',
              data: that.loginForm,
              headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            })
              // postRequest("login", this.loginForm)
              .then((resp) => {
                console.log(resp)
                if (resp.data.code === '20000') {
                  sessionStorage.setItem('token', resp.data.token)
                  this.$message.success('登录成功')
                  getUserInfo().then((res) => {
                    console.log(res)
                    this.$store.commit('setUser', res.data)
                  })
                  this.$router.push('/home')
                } else if (resp.data.code === '406') {
                  this.$message.error(resp.data.msg)
                }else {
                  this.$message.info(resp.data.msg)

                }
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      removeRembCopkie() {
        Cookies.remove('username')
        Cookies.remove('password')
        Cookies.remove('remember-me')
      },
      setRembCookie() {


     Cookies.set('username', this.loginForm.username, { expires: 14 })
        Cookies.set('password',this.Base64.encode( this.loginForm.password), { expires: 14 })
        Cookies.set('remember-me', this.loginForm['remember-me'], {
          expires: 14,
        })
      },
      getRembCookie() {
        this.loginForm.username = Cookies.get('username')
        this.loginForm.password = this.Base64.decode( Cookies.get('password'))
        this.loginForm['remember-me'] = Cookies.get('remember-me') === 'true'
      },
    },
    mounted() {
      // 从cookie中拿账号密码
      this.getRembCookie()
    },
  }
</script>

<style lang="css" scoped>
  .formContainer {
    background-clip: padding-box;
    width: 350px;
    margin: 100px auto;
    box-shadow: 0 0 25px #cac6c6;
    border-radius: 15px;
    padding: 35px 25px;
  }
  .login-title {
    text-align: center;
    font-size: 24px;
    margin-bottom: 15px;
  }
</style>
